<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinyBox2 - JavaScript Modal Windows</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="tinybox.js"></script>
</head>
<body>

<div id="testdiv">
<input type="text" value=""/>
<br>
<input type="text" value=""/>
<br>
	<h1>TinyBox2 JavaScript Modal Windows</h1>
	<h2>For complete details visit <a href="http://www.scriptiny.com/2011/03/javascript-modal-windows/">scriptiny.com</a>.</h2>
	<ul>
		<li onclick="TINY.box.show({html:'This is a warning!',animate:false,close:false,boxid:'error',top:5})">No Animation, No Close Button, Auto Width/Height, Custom Styling</li>
		<li onclick="TINY.box.show({url:'post.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})">Ajax Post, Fixed Width/Height, Light Mask, Custom Vertical Split</li>
		<li onclick="TINY.box.show({html:'The entry has been updated successfully!',animate:false,close:false,mask:false,boxid:'success',autohide:2,top:-14,left:-17})">Custom Position, No Mask, Auto-Hide</li>
		<li onclick="TINY.box.show({iframe:'t2.html',boxid:'frameless',width:750,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})">iFrame, Blue Mask, Absolute Position, Frameless, Close Callback</li>
		<li onclick="TINY.box.show({url:'advanced.html',width:300,height:150})">Ajax, Advanced Functions</li>
		<li onclick="TINY.box.show({image:'images/rhino.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})">Image, Load Callback</li>
	</ul>
	<p>
	如何获得document中当前焦点，这篇帖子讲得很全面
	<a href="http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus?lq=1">狠狠戳这里</a>
	</p>
	<p>
	简单总结就是：对于新版浏览器直接使用“document.activeElement;”
	</p>
	<p>	如果借助jquery，可以用“$("*:focus")”</p>
	<p>自力更生: 在每个元素的onblur,记下它,本demo用此笨方法，在firefox,chrome,ie9下测试通过</p>
</div>
<script type="text/javascript">
function openJS(){alert('loaded')}
function closeMe(){
	TINY.box.hide();
	closeJS();
}
function closeJS(){
	//alert('closed');
	if(lastBlur){
		lastBlur.focus();
	}
}
var lastBlur=null;
function hookblur(){
	var ipts = document.getElementsByTagName("input");
	for(var i=0; i<ipts.length; i++){
		var ipt = ipts[i];
		ipt.onblur=function(evt){
			var evt = evt || window.event,
            target = evt.target || evt.srcElement;		
			lastBlur=target;
			//alert(lastBlur);
		}
	}
}
hookblur();
</script>
</body>
</html>